import React, { useState } from "react"; 
import MyButton from "./UI/button/MyButton";
import MyInput from "./UI/input/MyInput";

const PostForm = ({create}) => {
   const [post, setPost] = useState({title: '', body: ''})

   const addNewPost = (e) => {
      e.preventDefault();
      const newPost = {
         ...post,
         id: Date.now(),
      }
      create(newPost)
      setPost({title:'' , body: ''}) //очистить форму после добавления поста
   }   

   return (
      <form>
      <MyInput 
         value={post.title} // связываем инпут c сотоянием title
         onChange={(e) => setPost({...post, title: e.target.value})}
         type="text"
         placeholder="Название поста"/>
      <MyInput 
         value={post.body}
         onChange={(e) => setPost({...post, body: e.target.value})}
         type="text" 
         placeholder="Описание поста"/>

      <MyButton onClick={addNewPost}>Добавить пост</MyButton>
 </form> 
     )
}

export default PostForm;

//* перенесли из Арр в PostForm состояние и инпуты с кнопкой
//* Но теерь надо реализовать фф-ю, которая будет этот пост ссоздавать
//* это у нас addNewPost
//* но все можно передавать тольо от родителя к ребенку,
//*  мы не можем здесь в форме эту функццию создать, чтобы она передавала в Арр корневой новые поств
//
//! ** Обмен данными между компонентами ***
//
//* Пропсы - это некоторые параметры, данные, которые компонент может принимать извне
//* НО обмен этии пропсами идет всегда сверху вниз - то есть от родител к ребенку
//
//
//* До этого у нас данные шли сверху вниз
//* Но теперь у нас есть PostForm, который должен создать новый пост, чтобы данные шли на верх!!!
//* а м ы должны этот новый созданный пост добавить в массив
//* Делать это из PostForm в App НЕЛЬЗЯ!!!
//* Так как передача пропсов снизу вверх невозможна 
//
//* НО!! мы можем передать callback(post) - функци обратного вызова
//* от родителя к дочернему компоненту колбэк как бы будет запрашивать новый пост!!!
//
//* Этот callback на вход будет ожидать post
//* И внутри сбя, полученный через аргументы пост, будет добавлять в массив!!
//
//* В дочернем копоненте мы эту функцию вызываем и тем самым пост попадает в массив!
//* Таким образом, мы можем передавать данные не только сверху вниз, но и снизу вверх
//* С помощью функции обратного вызова!!!

//! Как реализовать подобный функционал с callbackom ***
//
//* Вырежем уже созданную функцию из Арр и добавим в PostForm
//* Вот эта функция:
// const addNewPost = (e) => {
//    e.preventDefault();
//    //!  ***   запомнить НАВСЕГДА  - важно!! - добавление нового поста - развернуть старый массив и обавить новый пост по текущей дате
//    setPosts([...posts, {...post, id: Date.now()}])
//    setPost({title:'' , body: ''}) //очистить форму после добавления поста
// }
//
//* В ней у нас нет оступа к сотоянию setPosts, поэтому строчку с получением постов и id удалим
//
//* Вместо него добавим новый объект newPost
//* в него развернем состояние из формы
//* добавим id
// const newPost = {
//    ...post,
//    id: Date.now(),
// }
//
//* Теперь этот пост надо каким-то образом добавить в уже имеющийся массив постов, что обознаен в корневом Арр
//
//* для этого в Арр в retrun PostForm передаем функцию обратного вызова 
//*create={createPost} - сам пропс - create, а функция - createPost
//
//* И эту функцию реализуем в Арр над ретерном
//* Эта функция на вход будет ожидать новый созданный пост newPost
//* который мы создали и будем передавать в компоненте PostForm
//* И все, что мы будем в ней делать - изменять состояние
//* разворачивать старый массив и добавлять новый пост
// setPosts([...posts, newPost])
//* Теперь эту функцию нужно вызвать внутри PostForm
//* функция называется create - передаем ее как деструкторизации пропсов в Postform
//* а в addNewPost вызываем create и в нее передаем newPost
//
//* Функция обратного вызова отраотала как надо!!!
//* И у нас получилось два переиспользуемых компонента
//* Теперь в любом месте приложения можно использовать списо костов и форму для создания
//* PostForm и PostList